import React from "react"
import ReactDOM from "react-dom"
import AJAX from "../../../../lib/ajax"
require('./Evaluation.less')

class Evaluation extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            show: false,
            score: 5
        }
    }
    showDialog(key) {
        return ()=>{
            this.setState({
                show: key === "SHOW"
            })
        }
    }
    handleTextChange(e) {
        const num = e.target.value.length || 0
        const comment = e.target.value
        this.setState({
            letter_num: num,
            comment
        })
    }
    score(star_num){
        return ()=>{
            this.setState({
                score: star_num
            })
        }
    }
    submit() {
        let params = {
            order_id: this.props.orderId,
            type: this.props.type,
            star: this.state.score,
            content: this.state.comment
        }
        if(!params.content){
            delete params.content
        }
        AJAX.request("order_comment", params, (data) => {
            this.props.callback()
            this.showDialog("HIDE")
        })
    }

    componentWillMount(){
    }
    render() {
        const show = this.state.show
        const mask = show ? " weui-mask" : "weui-mask none"
        const actionsheet = show ? " weui-actionsheet dialog weui-actionsheet_toggle" : "weui-actionsheet dialog"
        return(
            this.props.can_cancel ? <div className="Evaluation flex">
                <a href="javascript:;" className="weui-btn weui-btn_warn flex1"
                   onClick={this.showDialog("SHOW")}
                >评论</a>
                <a href="javascript:;" className="weui-btn weui-btn_plain-orange flex1"
                   onClick={this.props.cancel.bind(this.props.this)}
                >取消订单</a>
                <div className={mask} id="mask" onClick={this.showDialog("HIDE")}></div>
                <div className={actionsheet} id="weui-actionsheet">
                    <div className="weui-cells weui-cells_form content">
                        <div className="weui-cells__title comment-title">
                            <i className="iconfont icon-cha" onClick={this.showDialog("HIDE")}></i>服务评价
                        </div>
                        <div className="comment-star">
                            {new Array(5).fill().map((item,index)=>{
                                const class_name = this.state.score >= index+1 ? "orange" : ""
                                return (<i className={`iconfont icon-star ${class_name}`}
                                           key={`icon${index+1}`}
                                           onClick={this.score(index+1)}></i>)
                            })}
                        </div>
                        <div className="weui-cell comment-textarea">
                            <div className="weui-cell__bd">
                                    <textarea className="weui-textarea" placeholder="我有话说" rows="3"
                                              maxlength="200"
                                              onChange={this.handleTextChange.bind(this)}></textarea>
                                <div className="weui-textarea-counter"></div>
                            </div>
                        </div>
                    </div>
                    <div className="weui-actionsheet__action btn-block">
                        <div className="weui-actionsheet__cell btn" id="actionsheet_cancel"
                             onClick={this.submit.bind(this)}>提交</div>
                    </div>
                </div>
            </div> :
            <div className="Evaluation">
                <a href="javascript:;" className="weui-btn weui-btn_warn"
                    onClick={this.showDialog("SHOW")}
                >评论</a>
                <div className={mask} id="mask" onClick={this.showDialog("HIDE")}></div>
                    <div className={actionsheet} id="weui-actionsheet">
                        <div className="weui-cells weui-cells_form content">
                            <div className="weui-cells__title comment-title">
                                <i className="iconfont icon-cha" onClick={this.showDialog("HIDE")}></i>服务评价
                            </div>
                            <div className="comment-star">
                                    {new Array(5).fill().map((item,index)=>{
                                        const class_name = this.state.score >= index+1 ? "orange" : ""
                                        return (<i className={`iconfont icon-star ${class_name}`}
                                                key={`icon${index+1}`}
                                                onClick={this.score(index+1)}></i>)
                                    })}
                            </div>
                            <div className="weui-cell comment-textarea">
                                <div className="weui-cell__bd">
                                    <textarea className="weui-textarea" placeholder="我有话说" rows="3"
                                        maxlength="200"
                                        onChange={this.handleTextChange.bind(this)}></textarea>
                                    <div className="weui-textarea-counter"></div>
                                </div>
                            </div>
                        </div>
                        <div className="weui-actionsheet__action btn-block">
                            <div className="weui-actionsheet__cell btn" id="actionsheet_cancel"
                                onClick={this.submit.bind(this)}>提交</div>
                        </div>
                    </div>
            </div>
        )
    }
}

module.exports = Evaluation